{extend name="layout/base"}

{block name="content"}
<div>   
    <table id="demo" lay-filter="test"></table>
    <div id="add" style="display: none;padding: 15px;">
        <form class="layui-form" lay-filter="form1">
            <div class="layui-form-item">
              <label class="layui-form-label">会员名</label>
              <div class="layui-input-inline">
                <input type="text" name="username" placeholder="请输入会员名" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-inline">
                  <input type="text" name="mobile" placeholder="请输入手机号" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">卡号</label>
                <div class="layui-input-inline">
                    <input type="text" name="cardno" placeholder="请输入卡号" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">有效期</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="validitytime">
                    <input type="text" name="validitytime" class="layui-input layui-hide">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">生日</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="birthday">
                    <input type="text" name="birthday" class="layui-input layui-hide">
                </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">性别</label>
              <div class="layui-input-inline">
                <input type="radio" name="sex" value="0" title="男">
                <input type="radio" name="sex" value="1" title="女" checked>
              </div>
            </div>
            <div class="layui-form-item">
              <div  style="text-align: center;">
                <button class="layui-btn" lay-submit lay-filter="submitadd">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
              </div>
            </div>
          </form>
    </div>
</div>
<script type="text/html" id="statusTpl">
    {{# switch(d.o_status) {
    case -1: }}
    <span class="layui-btn layui-btn-danger layui-btn-xs">未支付</span>
    {{# break;
    case 1: }}
    <span class="layui-btn layui-btn-checked layui-btn-xs">待支付</span>
    {{# break;
    case 2: }}
    <span class="layui-btn layui-btn layui-btn-xs">已支付</span>
    {{# break;
    case 3: }}
    <span class="layui-btn layui-btn-normal layui-btn-xs">已取消</span>
    {{# break;
    default: }}
    未知
    {{# break;
    } }}
</script>
<script>
layui.use(['jquery', 'table','form','laydate'], function () {
    var $ = layui.jquery,
        table = layui.table,
        form = layui.form,
        laydate = layui.laydate;
    data=[
        {id:1,uesername:"袁婷",sex:"nv"}
    ]
    table.render({
        elem: '#demo',
        data:data,
        url: 'lists',
        page: true, 
        cols: [[ 
        {field: 'poid', title: 'ID'},
        {field: 'o_no', title: '订单号'},
        {field: 'o_card_no', title: '会员卡号'} ,
        {field: 'o_mobile', title: '会员手机'},
        {field: 'total_fee', title: '订单总金额',templet:function(d){return d.total_fee/100}},
        {field: 'body', title: '说明'},
        {field: 'o_status', title: '状态',templet:'#statusTpl'},
        ]]
    });
    //监听头部工具栏
    table.on('toolbar(test)', function(obj){
        var checkStatus = table.checkStatus(obj.config.id);
        switch(obj.event){
            case 'add':
            layer.open({
                type: 1,
                // area: ['50%','50%'],
                content:$('#add')
            });
            break;
            case 'delete':
            layer.msg('删除');
            break;
            case 'update':
            layer.msg('编辑');
            break;
        };
    });
    //监听工具条 
    table.on('tool(test)', function(obj){
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
        
        if(layEvent === 'del'){ 
            layer.confirm('真的删除行么', function(index){
                $.ajax({
                    url:'',
                    type:'post',
                    data:"",
                    success:function(){
                        obj.del(); 
                        layer.close(index);
                    },
                    error:function(){

                    }
                })                
            });
        } else if(layEvent === 'edit'){             
            obj.update({
                username: '123',
                title: 'xxx'
            });
        } else if(layEvent === 'LAYTABLE_TIPS'){
            layer.alert('Hi，头部工具栏扩展的右侧图标。');
        }
    }); 
    //有效期实例化
    laydate.render({
        elem: '#validitytime',
        range: true,
        done: function(value, date, endDate){
            console.log(value); //得到日期生成的值，如：2017-08-18
            console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
            console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
            $("input[name='validitytime']").val(value)
        }
    });
    //生日实例化
    laydate.render({
        elem: '#birthday',
        type: 'date',
        done: function(value, date, endDate){
            console.log(value);
            console.log(date);
            $("input[name='birthday']").val(value) 
        }
    });
    //监听添加会员提交
    form.on('submit(submitadd)', function(data){
        console.log(data.field)
        return false; 
    });   
}) 
</script>
{/block}